import { useEffect, useState, forwardRef, useImperativeHandle } from 'react'
import FormUploadOneImg from '@/components/FormUploadOneImg'
import { useModel } from '@umijs/max'
import { Form } from 'antd'
import './TopImageCom.less'

function TopImageCom({}, ref) {
  const [topImageFormRef] = Form.useForm() // 页面设置表单
  const { setTopImageData, topImageData } = useModel('ActivityEditor')

  // 获取提交数据
  const handleFinish = async () => {
    await topImageFormRef.validateFields()
    const values = await topImageFormRef.getFieldsValue()
    return values
  }

  // 暴露给父组件的方法
  useImperativeHandle(ref, () => ({
    handleFinish
  }))

  // 监听 form 表单值变化
  const onValuesChange = (changedValues, allValues) => {
    setTopImageData(allValues)
  }

  // 初始化数据
  useEffect(() => {
    topImageFormRef.setFieldsValue(topImageData)
  }, [topImageData])

  return (
    <div className='top_image_com'>
      <p>编辑图片</p>
      <p style={{ color: '#86909C' }}>建议图片尺寸 : 高度 750px 宽度 529px</p>
      <Form
        onValuesChange={onValuesChange}
        style={{ marginTop: '20px' }}
        preserve={false}
        form={topImageFormRef}
        name='top_image_form'
      >
        <FormUploadOneImg name={'topImage'} colon={false} aspect={1.42 / 1} />
      </Form>
    </div>
  )
}

export default forwardRef(TopImageCom)
